<template>
  <div class="container">
    <scroll-view :scroll-y="true" :style="{height: scrollHeight +'px'}">
      <ul v-if="serviceList.length != 0">
        <li v-for="item in serviceList" :key="item.id" @tap="goto_customer(item.id)">
          <div class="left flex-item">
            <span class="user_pic">
              <img
                :src="item.headurl !== '0' ? item.headurl : 'http://mytimg.178mr.com/myt_default.jpg'"
                alt
              >
            </span>
            <div class="user_name">
              <span>{{item.name}}</span>
              <span class="arrivetime">到店时间: {{item.arrivetime}}</span>
            </div>
          </div>
          <div class="right">
            <span>{{item.num}}单</span>
          </div>
        </li>
      </ul>
      <ul v-else>
        <Empty message="今天还没有服务客户!"></Empty>
      </ul>
    </scroll-view>
  </div>
</template>

<script>
import wx from 'wx'
import api from '@/utils/api'
import Empty from '@/components/empty'
import moment from 'moment'
export default {
  data () {
    return {
      serviceList: [],
      scrollHeight: 0
    }
  },
  components: {
    Empty
  },
  async onLoad () {
    moment.locale('zh-cn') // 汉化
    let that = this
    await Promise.all([
      that.getswiperheight(),
      that.getguestfuwutoday()
    ])
  },
  methods: {
    async getswiperheight () {
      const that = this
      try {
        const res = wx.getSystemInfoSync()
        that.scrollHeight = res.windowHeight
      } catch (e) {
        console.log(e)
      }
    },
    async getguestfuwutoday () {
      let that = this
      const userInfo = wx.getStorageSync('userInfo')
      let paramObj = {
        departmentid: that.$route.query.jsonshop,
        floor: userInfo.floor,
        ismanage: userInfo.ismanage,
        user_id: userInfo.user_id
      }
      let res = await api.getguestfuwutoday(paramObj)
      if (res.code === '100') {
        res.data.forEach(item => {
          item.arrivetime = moment.unix(item.arrivetime).format('YY-MM-DD HH:mm a')
        })
        that.serviceList = res.data
      } else {
        that.serviceList = ''
      }
    },
    goto_customer (id) {
      this.$router.push({ path: '/pages/guest/customerlistdetails/customerlistdetails', query: { id: id } })
    }
  }
}
</script>

<style scoped>
.container {
  background-color: #fff;
}
li {
  display: flex;
  position: relative;
  height: 128rpx;
  padding-left: 20rpx;
}
li::after {
  position: absolute;
  content: "";
  width: 98%;
  left: 20rpx;
  bottom: 0;
  height: 2rpx;
  background-color: rgba(153, 153, 153, 0.1);
}
li .left {
  display: flex;
  font-size: 32rpx;
  color: rgba(51, 51, 51, 1);
}
li .left .user_pic {
  display: flex;
  align-items: center;
}
li .left .user_name {
  display: flex;
  flex-direction: column;
  margin-left: 30rpx;
  padding-top: 20rpx;
}
li .left .user_pic img {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
}
li .right {
  padding: 20rpx 20rpx 0 0;
  font-size: 28rpx;
  color: rgba(153, 153, 153, 1);
}
.arrivetime {
  font-size: 30rpx;
  color: rgba(153, 153, 153, 1);
}
</style>

